$(function () {

			var $lineContainer = $('.line-container'),
				$lineCanvas = $lineContainer.find('.line-canvas'),
				$submit = $('.submit'),
				lines = 0,
				points = [];

			/**
			*	连线方法
			*/
			var Line = function (leftQues, rightQues, lines, points) {
				this.canvas = $lineCanvas;
				this.leftQues = leftQues;
				this.rightQues = rightQues;
				this.lines = lines;
				this.points = points;
				this.leftPoint = {};
				this.rightPoint = {};
				this.change = false;
				this.draw = false;
				this.point();
				if (!this.draw) {
					this.start();
				}
				return this;
			};

			Line.prototype = {
				constructor: Line,

				// 确定连线两点的坐标
				point: function () {
					this.leftPoint.top = this.leftQues.position().top + this.leftQues.height() / 2;
					this.leftPoint.left = this.leftQues.position().left + this.leftQues.width();
					this.rightPoint.top = this.rightQues.position().top + this.rightQues.height() / 2;
					this.rightPoint.left = this.rightQues.position().left;
					return this;
				},

				// 开始连线
				start: function () {
					var self = this;

					// 第一次连线
					if (self.lines === 0) {
						addNewLine();
					}	
					else {
						// 左边选项已经连过线
						if (self.leftQues.data('opposite')) {
							if (self.leftQues.data('opposite') !== self.rightQues.data('num')) {
								self.leftQues.data('opposite', self.rightQues.data('num')); 
								console.log('change');
								$.each(self.points, function (index, point) {
									if (point.start[1] === self.leftPoint.top) {
										point.end = [self.rightPoint.left, self.rightPoint.top];
									}
								});
								self.change = true;
							}
						}
						// 左边选项没有连线
						else {
							addNewLine();
						}
					}

					if (self.change) {
						self.canvas[0].width = self.canvas[0].width;
						c = self.canvas[0].getContext('2d');
						c.lineWidth = 1.5;
						c.strokeStyle = 'red';
						$.each(self.points, function (index, point) {
							c.beginPath();
							c.moveTo(point.start[0], point.start[1]);
							c.lineTo(point.end[0], point.end[1]);
							c.closePath();
							c.stroke();
						});
					}

					function addNewLine() {
						self.leftQues.data('opposite', self.rightQues.data('num'));
						self.points[self.lines] = {
							start: [self.leftPoint.left, self.leftPoint.top],
							end: [self.rightPoint.left, self.rightPoint.top]
						};
						self.lines ++;
						self.change = true;
					}

					self.draw = true;
					return self;
				}
			};

			// --------------------------------------------------------------------------------------------------------

			/**
			*	确定左右两边题目 
			*/ 
			// 左边
			var leftQues = ['动物', '交通工具', '蔬菜'];
			$.each(leftQues, function (index, value) {
				$lineContainer.append(
					$(
						'<div class="line-ques ques-left" data-num="' + (index + 1) +'">' + value + '</div>'
					)
					.css('top', 100 * (index + 1))
				);
			});

			// 右边
			var rightQues = ['公交车', '猫', '西红柿'];
			$.each(rightQues, function (index, value) {
				$lineContainer.append(
					$(
						'<div class="line-ques ques-right" data-num="' + (index + 1) +'">' + value + '</div>'
					)
					.css('top', 100 * (index + 1))
				);
			});

			// --------------------------------------------------------------------------------------------------------

			/**
			*	点击执行连线
			*/ 
			var $leftQues = null,
				$rightQues = null,
				firstTime = 0
				secondTime = 0;

			// 第一次点击左侧选项
			$lineContainer.on('click', '.ques-left', function (e) {
				e.preventDefault();
				$leftQues = $(this);
				firstTime = new Date().getTime();
			});

			// 第二次点击右侧选项
			$lineContainer.on('click', '.ques-right', function (e) {
				e.preventDefault();
				if ($leftQues !== null) {
					$rightQues = $(this);
					secondTime = new Date().getTime();
					if (secondTime - firstTime < 2000) {
						var l = new Line($leftQues, $rightQues, lines, points);
						lines = l.lines;
						l = $leftQues = $rightQues = null;
					}
					firstTime = secondTime = 0;
				} 
			});

			// --------------------------------------------------------------------------------------------------------

			/**
			*	提交
			*/
			$submit.on('click', function (e) {
				e.preventDefault();
				$('.ques-left').each(function () {
					var $this = $(this);
					alert($this.data('num')+ '\n' + $this.data('opposite'));
				});
			});

		});